import { defineComponent, reactive, ref } from "vue";
import {
  ElForm,
  ElFormItem,
  ElButton,
  ElInput,
  FormInstance,
  ElSelect,
  ElOption,
  ElColorPicker,
} from "element-plus";
import { useLayoutStore } from "../../store";
import openDialog from "../../util/Dialog";

export default defineComponent({
  props: ["item"],
  setup(props, ctx) {
    const layout = useLayoutStore();
    const formRef = ref<FormInstance>();

    const initProps = {
      type: props.item.props.type,
      size: props.item.props.size,
      text: props.item.props.text,
      color: props.item.props.color,
    };

    const itemProps = reactive({ ...initProps });
    const applyBtn = (e: any) => {
      props.item.props.type = itemProps.type
      props.item.props.size = itemProps.size
      props.item.props.text = itemProps.text
      props.item.props.color = itemProps.color
    };

    const resetBtn = (e: any) => {
      if (formRef.value) {
        itemProps.type = props.item.props.type;
        itemProps.size = props.item.props.size;
        itemProps.text = props.item.props.text;
        itemProps.color = props.item.props.color;
      }
    };

    const dialogBtn = (e: any) =>{
      console.log('dialog');
      
      openDialog();
    }

    return () => {
      let content = (
        <ElForm
          labelPosition="top"
          label-suffix=":"
          model={itemProps}
          ref={formRef}
        >
          <ElFormItem label="文本">
            <ElInput v-model={itemProps.text}></ElInput>
          </ElFormItem>
          <ElFormItem label="类型">
            <ElSelect v-model={itemProps.type}>
              <ElOption label={"Primary"} value={"primary"}></ElOption>
              <ElOption label={"Success"} value={"success"}></ElOption>
              <ElOption label={"Info"} value={"info"}></ElOption>
              <ElOption label={"Warning"} value={"warning"}></ElOption>
              <ElOption label={"Danger"} value={"danger"}></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="尺寸">
            <ElSelect v-model={itemProps.size}>
              <ElOption label="Large" value="large"></ElOption>
              <ElOption label="Small" value="small"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="颜色">
            <ElColorPicker v-model={itemProps.color}></ElColorPicker>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" onClick={applyBtn}>
              应用
            </ElButton>
            <ElButton onClick={resetBtn}>重置</ElButton>
            <ElButton onClick={dialogBtn}>弹框</ElButton>
          </ElFormItem>
        </ElForm>
      );

      return <div class="setting-left">{content}</div>;
    };
  },
});
